<template>
  <div class="most-expected">
    <p class="title">近期最受期待</p>
    <div class="expected-list">
      <div class="expected-item" v-for="(item,index) in expected" :key="index">
        <div class="poster">
          <img :src="item.img.replace('w.h','170.230')" alt />
          <span class="wish-bg"></span>
          <span class="wish">
            <span class="wishNum">{{item.wish}}</span>人想看
          </span>
          <div class="toggle-wish">
            <span @click="collection(item,$event)" class="collection" :data="item.selected">❤</span>
          </div>
        </div>
        <h5 class="filmName">{{item.nm}}</h5>
        <p class="date">{{item.comingTitle.split(' ')[0]}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    expected: [],
    loading: false,
    finished: false
  }),
  created () {
    this.getExpected()
  },
  methods: {
    async getExpected () {
      const { data } = await this.$http.get(
        `ajax/mostExpected?ci=${this.$store.state.cityId}&limit=10&offset=0&token=5tmkP7f9vg1GQnz0WFFVX8yn3-QAAAAAagkAAJgKeg6PPSnfyfmzWY5278NI_ubiknKhO3QCx4IzJPrhE3nOJ-UTEn4vKg3Hhi9X9Q`
      )
      // console.log(data.coming)
      data.coming.forEach(el => {
        el.selected = 0
      })
      this.expected = data.coming
      for (var i = 10; i < data.paging.total; i += 10) {
        if (data.coming.length !== 0) {
          const { data } = await this.$http.get(
            `ajax/mostExpected?ci=${this.$store.state.cityId}&limit=10&offset=${i}&token=5tmkP7f9vg1GQnz0WFFVX8yn3-QAAAAAagkAAJgKeg6PPSnfyfmzWY5278NI_ubiknKhO3QCx4IzJPrhE3nOJ-UTEn4vKg3Hhi9X9Q`
          )
          data.coming.forEach(el => {
            el.selected = 0
          })
          this.expected = this.expected.concat(data.coming)
          // console.log(this.expected)
        } else {
          return false
        }
      }
    },
    collection (item, evt) {
      //   console.log(evt.target.getAttribute('data'))
      if (Number(evt.target.getAttribute('data')) === 0) {
        this.$Toast({
          message: '已标记想看',
          icon: 'success'
        })
        evt.target.style.color = 'red'
        evt.target.setAttribute('data', 1)
        item.wish++
      } else {
        this.$Toast({
          message: '已取消想看',
          icon: 'success'
        })
        evt.target.setAttribute('data', 0)
        evt.target.style.color = '#e1e1e1'
        item.wish--
      }
    }
  }
}
</script>
<style lang="less" scoped>
.most-expected {
  overflow-x: hidden;
  padding: 12px 0 12px 15px;
  margin-right: 18px;
  background-color: #fff;
  margin-bottom: 10px;
  .title {
    margin: 0;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
  }
  .expected-list {
    overflow: scroll;
    white-space: nowrap;
    .expected-item {
      display: inline-block;
      width: 85px;
      overflow-x: hidden;
      margin-right: 15px;
      .filmName {
        margin: 0;
        font-size: 13px;
        color: #222;
        margin-bottom: 3px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .date {
        margin: 0;
        font-size: 12px;
        color: #999;
      }
      .poster {
        width: 85px;
        height: 115px;
        position: relative;
        margin-bottom: 6px;
        background-color: #e1e1e1;
        background-size: 100% 100%;
        img {
          width: 100%;
          height: 100%;
        }
        .wish-bg {
          display: inline-block;
          width: 100%;
          height: 35px;
          position: absolute;
          bottom: 0;
          left: 0;
          background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
        }
        .wish {
          position: absolute;
          left: 4px;
          bottom: 2px;
          color: #faaf00;
          font-size: 11px;
          font-weight: 600;
        }
        .toggle-wish {
          width: 28px;
          line-height: 28px;
          background: rgba(61, 63, 71, 0.6);
          text-align: center;
          border-bottom-right-radius: 10px;
          position: absolute;
          top: 0;
          left: 0;
          .collection {
            color: #e1e1e1;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
